<template>
	<div>

		<a class="goBack" href="http://bigscreen.jywj12333.com:90/admin/index_bigScreen">数据中台</a>
		<a class="goNext" href="http://bigscreen.jywj12333.com:90/admin/bigScreen#/wj04/index">下一屏</a>
		<a class="goLast" href="http://bigscreen.jywj12333.com:90/admin/bigScreen#/wj02/index">上一屏</a>
		<aside class="fixed-wrapper">
			<span>{{dateTime}}</span>
			<el-dropdown @command="handleOptClick" class="dropDown-wrapper">
				<span class="el-dropdown-link">
					数据范围: {{curOpt}}<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item :command="`今日`">今日</el-dropdown-item>
					<el-dropdown-item :command="`本月`">本月</el-dropdown-item>
					<el-dropdown-item :command="`本季度`">本季度</el-dropdown-item>
					<el-dropdown-item :command="`本年`">本年</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</aside>
		<el-container style="height: 100vh;">
			<el-header height="82px" style="padding: 0">
				<router-view></router-view>
			</el-header>
			<!--<router-view name="posts" v-if="postsHeight" :height="postsHeight" :dateProp="dateProp" :style="`height:${postsHeight}px;`"></router-view>-->
			<el-main ref="reference" :style="`padding:${marTop}px 20px 20px 20px !important`">
				<el-row :gutter="15">
					<el-col :span="6">
						<router-view ref="leftCol_01" name="leftCol_01" v-if="leftCol_01" :height="leftCol_01" :dateProp="dateProp"
						 :style="`height:${rightCol_01}px;`"></router-view>
					</el-col>
					<el-col :span="12">
						<router-view ref="midCol_01" name="midCol_01" v-if="true" :curOpt='curOpt' :height="midCol_01" :dateProp="dateProp" :style="`height:${midCol_01}px;`"></router-view>
						<!-- <router-view ref="midCol_02" name="midCol_02" v-if="midCol_02" :height="midCol_02" :dateProp="dateProp" :style="`height:${midCol_02}px;`"></router-view> -->
						<router-view ref="midCol_03" name="midCol_03" v-if="midCol_03" :height="midCol_03" :dateProp="dateProp" :style="`height:${midCol_03}px;`"></router-view>
                        <router-view ref="midCol_04" name="midCol_04" v-if="midCol_04" :height="midCol_04" :dateProp="dateProp" :style="`height:${midCol_04}px;`"></router-view>

					</el-col>
					<el-col :span="6">
						<router-view ref="rightCol_01" name="rightCol_01" v-if="rightCol_01" :height="rightCol_01" :dateProp="dateProp"
						 :style="`height:${rightCol_01}px;`"></router-view>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'App',
		data() {
			return {
				date: new Date(),
				curOpt: '本月',
				leftCol_01: null,
				leftCol_02: null,
				midCol_01: null,
				midCol_02: null,
				midCol_03: null,
                rightCol_01: null,
                midCol_04:null,
				dateTime:'',
				timer:'',
				marTop:''
			}
		},
		computed: {
			dateStr() {
				return this.formatDate(this.date, 'YYYY-MM-DD HH:mm:ss')
			},
			dateProp() {
				this.pullData();
				if (this.curOpt === '本月') {
					return {
						month: this.formatDate(this.date, 'YYYY-MM')
					}
				} else if (this.curOpt === '本季度') {
					return {
						year: this.formatDate(this.date, 'YYYY'),
						quarter: this.formatDate(this.date, 'quarter')
					}
				} else if (this.curOpt === '本年') {
					return {
						year: this.formatDate(this.date, 'YYYY')
					}
				} else {
					return {
						date: this.formatDate(this.date, 'YYYY-MM-DD')
					}
				}
			},
			mainHeight: {
				get() {
					return 0
				},
				set(val) {
					this.leftCol_01 = val  ;
					this.leftCol_02 = val * 2 / 5 - 10;
					this.midCol_01 = 120;
					this.midCol_02 = (val - 120) * 2 / 7 - 10;
                    this.midCol_03 = (val - 120) * 4 / 7 -2;
                    this.midCol_04 = (val - 120) * 2 / 5 - 25;
					this.rightCol_01 = val
					this.marTop=val/23
				}
			}
		},
		methods: {
			switchRange(range){
				switch(range){
					case 'range=1':
						this.curOpt='今日'
						break;
					case 'range=2':
						this.curOpt='本月'
						break;
					case 'range=3':
						this.curOpt='本季度'
						break;
					case 'range=4':
						this.curOpt='本年'
						break;
				}
			},
			addzero(data){
				if(JSON.stringify(parseInt(data)).length=='1'){
					return '0'+data
				}else{
					return data
				}
			},
			handleOptClick(name) {
				// console.log(name);
				this.curOpt = name;
				this.$nextTick(_ => {
					this.$refs.leftCol_01.init();
					// this.$refs.leftCol_02.init();
					this.$refs.midCol_01.init();
					// this.$refs.midCol_02.init();
                    this.$refs.midCol_03.init();
                    this.$refs.midCol_04.init();
					this.$refs.rightCol_01.init();
				})
			},
			pullData() {
				if (this.curOpt != '今日') {
					return;
				}
				//return;
				var that = this;
				setTimeout(function() {
					// that.$refs.leftCol_01.init();
					// that.$refs.leftCol_02.init();
					// that.$refs.midCol_01.init();
					// that.$refs.midCol_02.init();
					// that.$refs.midCol_03.init();
					// that.$refs.midCol_04.init();
					if (that.curOpt != '今日') {
						return;
					}
					that.pullData(name);
				}, 30 * 1000);
			},
		},
		mounted() {
			this.mainHeight = this.$refs.reference.$el.clientHeight - 45;
			this.$store.commit('UPDATE_DATE', this.formatDate(this.date, 'YYYY-MM-DD'));
			this.timer=setInterval(()=>{
				var myDate = new Date();
				let newDate=myDate.getFullYear()+'-'+this.addzero(myDate.getMonth()+1) +'-'+this.addzero(myDate.getDate())+' '+this.addzero(myDate.getHours())+':'+this.addzero(myDate.getMinutes())+':'+this.addzero(myDate.getSeconds());
				this.dateTime=newDate
			},1000)
			this.switchRange(window.location.href.split('?')[1].split('&')[0]);
		},
		beforeDestroy(){
			if (this.timer) {
      		clearInterval(this.timeId);
   		 }
		}
	}
</script>
<style lang="stylus" scoped>
  .fixed-wrapper
    position fixed
    top 20px
    right 15px
    z-index 1000
    color #35ced8
  .dropDown-wrapper
    color #ffffff
</style>